<template>
	<view class="Ginput" :class="islabel?active?'active':'':'nolabel'">
		<label v-if="islabel">{{name}}</label>
		<u-input 
		border="none" 
		maxlength="4"

		@blur="inputBlur" 
		@focus="inputFocus"
		@input="inputValue" 
		:value="value" 
		:placeholder="islabel?'':name" 
		type="number">
			<template slot="suffix">
				<view class="code">
					<u-code
						ref="uCode"
						@change="codeChange"
						class="nbtn"
						seconds="60"
						changeText="X秒"
					></u-code>
					<u-button
						:disabled="!username"
						@tap="getCode"
						:text="tips"
						type="text"
					></u-button>
				</view>
			</template>
		</u-input>
		<tf-verify-img @succeed="chenggong" @close="showVerify = false" v-if="showVerify"></tf-verify-img>
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	import tfVerifyImg from '@/components/tf-verify-img/tf-verify-img.vue';
	export default {
		mixins:[mixin],
		components:{tfVerifyImg},
		props:{
			username:'',
			name:'',
			trigger:'',
			islabel:{
				type:Boolean,
				default:true
			},
			type:{
				type:String,
				default:()=>{
					return 'text'
				}
			},
			value:{
				type:[String,Number],
				default:()=>{
					return ''
				}
			},
			isFlag: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				show:false,
				focus:false,
				tips:'',
				showVerify:false
			};
		},
		computed:{
			active(){
				if(this.value||this.focus){
					return true
				}
			},
		},
		watch:{
			trigger(v){
				if(v===1){
					this.getCode()
				}
			}
		},
		methods:{
			inputValue(e){
				this.$emit('input',e)
			},
			inputFocus(){
				this.focus = true
			},
			inputBlur(){
				this.focus = false
			},
			codeChange(text) {
			    this.tips = text;
			},
		async getCode() {
				if (this.isFlag) {
					if(uni.$u.test.mobile(this.username)){
						if (this.$refs.uCode.canGetCode) {
							this.shayuSms(this.username)
						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					}else{
						uni.$u.toast('手机号码不正确');
					}
				} else {
					if (this.$refs.uCode.canGetCode) {
						this.shayuSms(this.username)
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}
			},
			chenggong(){
			    // uni.showToast({
			    //     title: '验证成功'
			    // });
				this.shayuSms(this.username)
			    this.showVerify = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Ginput{
		width: 100%;
		position: relative;
		&.active{
			label{
				font-size: 22rpx;
				color: #A2A2A2;
				top: 20rpx;
			}
			::v-deep .u-input__content{
				margin-top: 25rpx;
				input{
					font-size: 22rpx;
				}
			}
		}
		
		label{
			position: absolute;
			left: 10px;
			top: calc(50% - 15rpx);
			font-size: 25rpx;
			font-weight: 400;
			color: #FFFFFF;
			transition: 0.35s;
		}
		.u-input{
			height: 105rpx;
			border: 2rpx solid #f5f5f5;
			border-radius: 9rpx;
			padding-top: 0;
			padding-bottom: 0;
			::v-deep input{
				font-size: 28rpx!important;
				font-weight: 400!important;
				color: #000000!important;
			}
		}
		&.nolabel{
			height: auto;
			padding: 0;
			.u-input{
				height: 60rpx;
				line-height: 60rpx;
				border: 0;
				border-bottom: 2rpx solid #f5f5f5;
				border-radius: 0rpx;
				padding:0 0 10rpx 0 !important;
				font-size: 28rpx;
				::v-deep input{
					font-size: 28rpx!important;
					}
			}
		}
		.code{			
			margin-left: 20rpx;
			::v-deep button{
				min-width: 180rpx;
				height: 60rpx;
				background: #00000000;
				border-radius: 10rpx;
				border: 0;
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				&.u-button--disabled{
					opacity: 1;
					background-color: transparent;
					color: #000;
				}
			}
			::v-deep .nbtn{
				text-align: right!important;
			}
		}
	}
</style>
